<template>
  <div>
    <el-form :model="formData" ref="formData" label-width="80px" size="small">
      <el-form-item prop="country" label="国家">
        <el-select v-model="formData.country" filterable clearable placeholder="请选择">
          <el-option v-for="(item,index) in countryList" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="date" label="日期">
        <el-date-picker
          v-model="formData.data"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="getTime"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label-width="20px">
        <el-button
          type="primary"
          @click="getData"
          icon="el-icon-search"
          size="small"
        >{{$t('m.button.search')}}</el-button>
        <el-button @click="resetForm('formData')" icon="el-icon-circle-close">清空</el-button>
        <el-button
          type="warning"
          @click="download"
          :disabled="downloadloading"
          :icon="downloadloading?'el-icon-loading':'el-icon-download'"
        >下载</el-button>
      </el-form-item>
      <el-form-item style="float: right;">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          :page-size="formData.pageSize"
          :current-page.sync="formData.currentPage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-form-item>
    </el-form>
    <el-table
      ref="table"
      :data="tableData"
      :header-cell-style="getRowClass"
      border
      v-loading="loading"
    >
      <el-table-column prop="companyName" label="公司名"></el-table-column>
      <el-table-column prop="companyWebsite" label="公司网站"></el-table-column>
      <el-table-column prop="firstName" label="名字"></el-table-column>
      <el-table-column prop="lastName" label="姓"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="officePhone" label="办公室电话"></el-table-column>
      <el-table-column prop="mobilePhone" label="移动电话"></el-table-column>
      <el-table-column prop="locationOfCompany" label="公司所在地"></el-table-column>
      <el-table-column prop="instagramProfileLink" label="Instagram Profile Link"></el-table-column>
      <el-table-column prop="facebookProfileLink" label="Facebook Profile Link"></el-table-column>
      <el-table-column prop="otherSocialMediaLink" label="其他社交媒体链接"></el-table-column>
      <el-table-column prop="socialMedia" label="社交媒体"></el-table-column>
      <el-table-column prop="commerce" label="电子商务"></el-table-column>
      <el-table-column prop="events" label="大事记"></el-table-column>
      <el-table-column prop="publicRelations" label="公共关系"></el-table-column>
      <el-table-column prop="other" label="其他"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column prop="cTime" label="日期">
        <template slot-scope="scope">{{scope.row.cTime | formatDate}}</template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { distributorList, distributorCountry } from "@/api/warranty";
import { formatDate } from "assets/js/date";
export default {
  data() {
    return {
      tableData: [],
      countryList: [],
      formData: {
        country: "",
        endDate: "",
        startDate: "",
        currentPage: 1,
        pageSize: 20,
        data: "",
      },
      total: 1,
      loading: true,
      downloadloading: false,
    };
  },
  filters: {
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
  },
  created() {
    this.getData();
    this.getCountry();
  },
  methods: {
    getData() {
      this.loading = true;
      distributorList(this.formData).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.etxra;
      });
    },
    getCountry() {
      distributorCountry().then((res) => {
        this.countryList = res.data.data;
      });
    },
    getTime(date) {
      if (date) {
        this.formData.startDate = date[0];
        this.formData.endDate = date[1];
      } else {
        this.formData.startDate = "";
        this.formData.endDate = "";
      }
    },
    handleCurrentChange(cpage) {
      this.formData.currentPage = cpage;
      this.getData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getData();
    },
    download() {
      this.downloadloading = true;
      distributorList({
        country: this.formData.country,
        endDate: this.formData.endDate,
        startDate: this.formData.startDate,
        currentPage: this.formData.currentPage,
        pageSize: this.total,
      }).then((res) => {
        const row = [];
        res.data.data.forEach((el) => {
          el.street = el.street + el.city + el.street + el.state + el.zip
          row.push(el);
        });
        this.export2Excel(row, "测验");
        this.downloadloading = false;
      });
    },
    export2Excel(tableData, title) {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel"); //这里必须使用绝对路径
        const tHeader = []; // 导出的表头名
        const filterVal = []; // 导出的表头字段名
        const list = tableData;
        this.$refs.table.columns.forEach((item) => {
          if (item.property) {
            tHeader.push(item.label);
            filterVal.push(item.property);
          }
        });
        const data = that.formatJson(filterVal, list);
        export_json_to_excel(
          tHeader,
          data,
          title + formatDate(new Date(), "yyyy-MM-dd hh_mm")
        );
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 标题背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #EBEEF5 ";
      } else {
        return "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form {
  margin-top: 15px;
}
.el-form-item {
  display: inline-block;
}
</style>